<template>
  <div class="myshare">
    <van-cell border @click="$router.push(`/shareDetail/${item.id}`)">
      <div class="article">
        <div class="title textOver" v-html="item.title"></div>
        <div class="content textOver">
          {{ item.content }}
        </div>
        <div class="meta">
          <div class="author">
            <img :src="baseUrl + item.author.avatar" alt="" class="imgPic" />
            <span>{{ item.author.nickname }}</span>
          </div>
          <div class="time">{{ item.updated_at | timeFormat }}</div>
          <div class="read">
            <van-icon name="eye-o" /> <span>{{ item.read }}</span>
          </div>
          <div class="star">
            <van-icon name="good-job-o" />
            <span>{{ item.star === null ? 0 : item.star }}</span>
          </div>
        </div>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: ['item'],
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL
    }
  }
}
</script>

<style lang="less">
.myshare {
  .article {
    padding-bottom: 15px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #181a39;
    }
    .content {
      font-size: 14px;
      font-weight: 400;
      color: #545671;
      margin-top: 10px;
    }
    .meta {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .read,
      .star,
      .author {
        display: flex;
        align-items: center;
      }
      .read {
        margin: 0 20px;
      }
      .read,
      .star,
      .time {
        color: #b4b4bd;
        span {
          margin-left: 5px;
        }
      }
      .author {
        flex: 1;
        .imgPic {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
    }
  }
  .textOver {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 2; //显示的行
  }
}
</style>
